<template>
    <view class="box" v-if="SHOW_TOP" :style="'top:' + (custom ? navbarHeight : 0) + 'px;'" id="add-tips">
        <view class="arrow" :style="'margin-right:' + arrowR + 'px;'"></view>
        <view class="body" @tap="hidden" :style="'margin-right:' + bodyR + 'px;'">
            <view class="flag">
                <image class="close" :src="closeIcon" />
            </view>
            <view class="tips">点击右上角 ·•·，添加到我的小程序。一键考勤！</view>
        </view>
    </view>
</template>

<script>
const STORAGE_KEY = 'PLUG-ADD-MYAPP-KEY';
const app = getApp();
export default {
    data() {
        return {
            SHOW_TOP: false,
            closeIcon: app.globalData.imgs.closeIcon,
            navbarHeight: '',
            arrowR: '',
            bodyR: ''
        };
    },
    props: {
        name: {
            type: String,
            default: ''
        },
        duration: {
            //出现时间
            type: Number,
            default: 4
        },
        delay: {
            //出现延时
            type: Number,
            default: 2
        },
        custom: {
            type: Boolean,
            default: false
        },
        timer: {
            //定时器开关
            type: Boolean,
            default: false
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    destroyed: function () {
        if (this.startTimer) {
            clearTimeout(this.startTimer);
        }
        if (this.duraTimer) {
            clearTimeout(this.duraTimer);
        }
    },
    methods: {
        attached: function () {
            if (uni.getStorageSync(STORAGE_KEY)) {
                return;
            }
            let rect = uni.getMenuButtonBoundingClientRect ? uni.getMenuButtonBoundingClientRect() : null;
            let { screenWidth } = uni.getSystemInfoSync();
            this.setData({
                navbarHeight: rect.bottom,
                arrowR: screenWidth - rect.right + (rect.width * 3) / 4 - 5,
                bodyR: screenWidth - rect.right
            });
            this.startTimer = setTimeout(() => {
                this.setData({
                    SHOW_TOP: true
                });
            }, this.delay * 1000);
            if (this.timer) {
                this.duraTimer = setTimeout(() => {
                    this.shrink();
                }, (this.duration + this.delay) * 1000);
            }
        },

        hidden: function () {
            uni.setStorageSync(STORAGE_KEY, true);
            this.shrink();
        },

        shrink: function () {
            // #ifdef MP-WEIXIN
            this.$scope.animate(
                '#add-tips',
                [
                    {
                        scale: [1, 1]
                    },
                    {
                        scale: [0, 0],
                        ease: 'ease',
                        transformOrigin: `calc(600rpx - ${this.arrowR}px) 1%`
                    }
                ],
                500,
                function () {
                    this.setData({
                        SHOW_TOP: false
                    });
                }.bind(this)
            );
            // #endif
            // #ifndef MP-WEIXIN
            this.animate(
                '#add-tips',
                [
                    {
                        scale: [1, 1]
                    },
                    {
                        scale: [0, 0],
                        ease: 'ease',
                        transformOrigin: `calc(600rpx - ${this.arrowR}px) 1%`
                    }
                ],
                500,
                function () {
                    this.setData({
                        SHOW_TOP: false
                    });
                }.bind(this)
            );
            // #endif
        }
    },
    created: function () {}
};
</script>
<style>
.box {
    position: fixed;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    width: 600rpx;
}
.arrow {
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
}
.body {
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 10px;
    position: relative;
}
.tips {
    flex: 1;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}
.logo {
    height: 42px;
    width: 42px;
    border-radius: 8px;
    margin-right: 10px;
}
.flag {
    position: absolute;
    right: 1px;
    top: 1px;
    font-size: 14px;
    color: #fff;
}
.close {
    height: 18px;
    width: 18px;
}
</style>
